<template>
  <FForm
    :schema="schema"
    label-position="top"
    label-width="100px"
    @on-submit="onSubmit"
  />
</template>

<script setup lang="ts">
import {
  FFEnum,
  FFSchema
} from 'fate-element/lib/components/fate-form/fform.types';
import { ElMessage } from 'element-plus';

const asyncDataPromise = (): Promise<FFEnum[]> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        {
          label: '张三',
          value: 1
        },
        {
          label: '李四',
          value: 2
        }
      ]);
    }, 1000);
  });
};

const schema: FFSchema = {
  properties: {
    input: {
      type: 'string',
      title: '姓名',
      layout: {
        span: 12
      }
    },
    sex: {
      type: 'number',
      title: '性别',
      enums: [
        {
          label: '男',
          value: 1
        },
        {
          label: '女',
          value: 2
        }
      ],
      ui: {
        widget: 'select'
      },
      layout: {
        span: 12
      }
    },
    classmate: {
      type: 'number',
      title: '同学（异步）',
      ui: {
        widget: 'select',
        asyncData: asyncDataPromise
      },
      layout: {
        span: 12
      }
    },
    checkbox: {
      type: 'array',
      title: '复选框',
      enums: [
        {
          label: '选项1',
          value: '1'
        },
        {
          label: '选项2',
          value: '2'
        },
        {
          label: '选项3',
          value: '3'
        }
      ],
      ui: {
        widget: 'checkbox'
      },
      layout: {
        span: 12
      }
    },
    cascader: {
      type: 'array',
      title: '级联选择',
      enums: [
        {
          label: '选项1',
          value: '1',
          children: [
            {
              label: '选项1-1',
              value: '1-1'
            }
          ]
        },
        {
          label: '选项2',
          value: '2',
          children: [
            {
              label: '选项2-1',
              value: '2-1',
              children: [
                {
                  label: '选项2-1-1',
                  value: '2-1-1'
                }
              ]
            }
          ]
        },
        {
          label: '选项3',
          value: '3'
        }
      ],
      ui: {
        widget: 'cascader'
      },
      layout: {
        span: 12
      }
    }
  },
  gutter: 20
};

const onSubmit = (data: any) => {
  console.log(data);
  ElMessage.info(JSON.stringify(data));
};
</script>

<style scoped></style>
